<template>
  <div class="list">
    <span class="score">{{ score }}</span>
    <form ref="form">
      <ol>
        <li
          v-for="(item, index) in exams"
          :key="index"
        >
          <div class="item-content">
            <p class="item-p">
              <span>{{ item.exam[0] }}</span>
              {{ typeText[type] }}
              <span>{{ item.exam[1] }}</span>
            </p>
            =
            <input @change="saveAnswer($event, index)" type="number">
            <strong v-if="showRes" class="res">
              <span v-if="validate(item.exam, item.answer)" class="right">√</span>
              <span v-else class="error">×</span>
            </strong>
          </div>
        </li>
      </ol>
    </form>
    <el-button
      type="success"
      size="large"
      style="margin: 20px;"
      @click="restart"
    >重新开始
    </el-button>
    <el-button
      :disabled="showRes"
      type="primary"
      size="large"
      style="margin: 20px;"
      @click="onSubmit"
    >提交试卷
    </el-button>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import moment from 'moment'

  import { getLocalData, setLocalData } from '@/utils/localData'

  export default {
    computed: {
      ...mapState({
        exams: state => state.exam.exams,
        type: state => state.exam.type,
        typeText: state => state.exam.typeText,
        showRes: state => state.exam.showRes,
        total: state => state.exam.total
      }),
      score() {
        if (!this.showRes) {
          return ''
        }
        const rightNum = this.exams.filter(({ exam, answer }) => this.validate(exam, answer)).length
        return (Math.round(rightNum / this.total * 100)) + '分'
      }
    },
    methods: {
      validate([a, b], answer) {
        let isRight = false
        switch (this.type) {
          case 'ADD':
            isRight = (a + b === answer)
            break
          case 'SUBTRACTION':
            isRight = (a - b === answer)
            break
          case 'MULTIPLY':
            isRight = (a * b === answer)
            break
          case 'DIVIDE':
            isRight = (a / b === answer)
            break
          default:
            isRight = false
        }
        return isRight
      },
      saveAnswer(e, index) {
        const exams = [...this.exams]
        exams[index].answer = Number(e.target.value)
        this.$store.commit('SET_EXAM', {
          exams
        })
      },
      resetForm() {
        this.$refs.form.reset()
      },
      saveData() {
        const key = 'STATISTICS'
        const data = {
          time: moment().format('YYYY-MM-DDTHH:mm:ss'),
          exams: this.exams,
          score: this.score
        }
        try {
          const statistics = getLocalData(key) || []
          statistics.push(data)
          console.log(statistics)
          setLocalData(key, statistics)
        } catch (e) {
          setLocalData(key, [data])
        }
      },
      onSubmit() {
        this.$store.commit('SET_EXAM', {
          showRes: true
        })
        window.scrollTo(0, 0)
        this.saveData()
      },
      restart() {
        this.resetForm()
        this.$store.commit('SET_EXAM', {
          showRes: false
        })
        this.$store.dispatch('refreshExam')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .score {
    color: red;
    font-size: 40px;
    line-height: 3;
  }

  .res {
    .right {
      color: #1da57a;
    }
    .error {
      color: red;
    }
  }

  li {
    line-height: 1.5;
    font-size: 20px;
    color: #999999;
    padding-left: 20px;
  }

  .item-content {
    color: #333333;
    font-weight: bold;
  }

  .item-p {
    min-width: 62px;
    display: inline-block;
  }
</style>
